<template>
	<view class="content reg-page">
		<view class="input-group">
			<view class="input-row border-bottom-1px" @click="uploadImgs">
				<view class="header">
					<text class="title">公司Logo</text>
					<text class="tip">公司Logo将出现在公司主页、公司职位等位置！</text>
				</view>
				<view class="head-img">
					
					<view v-if="company.enterpriseLogo==''" :src="imgSrcUrl + 'head.png'">反面</view>
					<image v-else :src="company.enterpriseLogo"></image>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">公司名称</text>
				<view class="input-item"  @click="confirmDialog(company.enterpriseName,company.updateNameCount)">
					<input class="padding-10" placeholder="请输入公司名称" disabled v-model="company.enterpriseName" />
					<text class="yzb yzb-next"></text>
				</view>
			</view>		
			<view class="input-column border-bottom-1px" @click="toIndustry()">
				<text class="title">所在行业</text>
				<view class="space-between-algin row padding-height-20">
					<input class="padding-10" disabled="true" placeholder="请选择所在行业" :value="company.industryList" />
					<text class="yzb yzb-next"></text>
				</view>				
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">工作时间</text>
				<view class="row space-between-algin">
					<picker mode="time" v-model="company.startWorkTime" @change="bindDate1Change">
						<input class="padding-10" disabled placeholder="开始时间" :value="company.startWorkTime" />
					</picker>
					至
					<picker mode="time" v-model="company.endWorkTime" @change="bindDate2Change">
						<input class="padding-10" disabled style="text-align: center;" placeholder="结束时间" :value="company.endWorkTime" />
					</picker>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">公司规模</text>
				<view class="picker">
					<picker @change="bindPickerChange" :value="company.enterpriseScale" :range="array">
						<input class="padding-10" disabled placeholder="请选择公司规模" :value="company.enterpriseScale" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">成立时间</text>
				<view class="picker">
					<picker mode="date" :value="company.enterpriseFoundTime" :start="startDate" :end="endDate"  @change="bindDateChange">									
						<input class="padding-10" disabled placeholder="选择公司成立时间" disabled :value="company.enterpriseFoundTime" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
			<view class="input-column border-bottom-1px">
				<text class="title">公司性质/融资阶段</text>
				<view class="picker">
					<picker @change="naturePickerChange" :value="company.enterpriseNature" :range="naturelist">
						<input class="padding-10" disabled placeholder="请选择公司性质" :value="company.enterpriseNature" />
					</picker>
					<text class="yzb yzb-next"></text>
				</view>
			</view>
		</view>		
		<view class="btn-row row">			
			<button type="primary" class="btn-save" @click="register">保存</button>
		</view>
		<!-- 提交信息 -->
		<uni-popup ref="popup" type="center" catchtouchmove>
			<view class="mask-content">
				<view class="uni-popup-dialog">
					<view class="uni-dialog-title">
						<text class="uni-dialog-title-text">公司名称</text>
					</view>
					<view class="uni-dialog-content">
						<input class="uni-dialog-input" maxlength="12" type="text" v-model="infoname" @input="onInput" placeholder="填写公司名称">
					</view>	
					<view class="flex jcsb mar-top-20 pad-20">
						<view class="fc-84 fs-26">每月可修改1次，本月还可以修改1次</view>
						<view>{{contentLength}}/{{len}}</view>
					</view>
					<view class="uni-dialog-button-group">
						<view class="uni-dialog-button">
							<text class="uni-dialog-button-text" @click="caLce">取消</text>
						</view>
						<view class="uni-dialog-button uni-border-left">
							<text class="uni-dialog-button-text uni-button-color" @click="onOk">确定</text>
						</view>
					</view>
					
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { formatDate, calCurrentYear } from '@/common/date';
import uploadImage from '@/common/ossutil/uploadFile';
import formRuleConfig from '@/config/formRule.config.js';
import graceChecker from '@/common/graceChecker.js';
import uniPopup from '@/components/uni-popups/uni-popup.vue';
export default {
	components: {uniPopup},
	computed: {
		...mapState(['openId', 'customerInfo']),
		contentLength(){
			return this.infoname.length;
		},
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			imgSrcUrl: this.$mConfig.imgSrcUrl,
			array: ['0-20人', '20-99人', '100-499人', '500-999人', '1000-9999人', '10000人以上'],
			naturelist: ['不限', '未融资', '天使轮', 'A轮', 'B轮', 'C轮'],
			len:12,
			infoname:'',
			company:{
				enterpriseLogo:null,//企业logo
				industryId:null,
				industryName:null,
				enterpriseScale:null,//企业规模
				startWorkTime:'',//工作开始时间
				endWorkTime:'',//工作结束时间
				enterpriseFoundTime:'',//成立时间
				enterpriseNature:'',//公司性质
			}
		};
	},
	onLoad(query) {
		console.log(query);		
	},
	mounted() {
		let that = this	
		this.getRrecruitList()		
	},
	methods: {
		//获取企业信息
		async getRrecruitList(){
			let param = {
				pageNum: 1,
				pageSize: 10,
				imgType:1,
				wxuserId:uni.getStorageSync('wxuser_id'),
			}
			let data = await this.$apis.getRrecruitList(param);
			if(data.rows.length>0){
				this.company = data.rows[0]
				//处理行业
				var newarry = []
				for(var i=0;i<data.rows[0].industryList.length;i++){
					newarry.push(data.rows[0].industryList[i].industryName)
				}
				this.company.industryList = newarry.toString()		
			}			
		},
		//输入公司名称
		confirmDialog(title,updateNameCount) {
			if(updateNameCount == 1){
				uni.showToast({
					title: '不可修改（每月可修改1次）',
					icon: "none"
				});				
			}else{
				this.infoname = title
				this.$refs.popup.open();
			}			
		},
		//公司规模
		bindPickerChange: function(e) {
			this.company.enterpriseScale = this.array[e.target.value];
		},
		//工作时间选择开始
		bindDate1Change: function(e) {
			this.company.startWorkTime = e.target.value;
		},
		//工作时间结束
		bindDate2Change: function(e) {
			this.company.endWorkTime = e.target.value;
		},
		//企业性质
		naturePickerChange(e){
			this.company.enterpriseNature = this.naturelist[e.target.value];
		},
		//公司成立时间		
		bindDateChange: function(e) {
			this.company.enterpriseFoundTime = e.target.value;
		},
		//所在行业
		toIndustry() {
			this.$mRouter.push({
				route: this.$mRoutesConfig.industry,
				query: {
					choicetype:2
				}
			});
		},
		// 选择图片
		uploadImgs() {
			let that = this;
			uni.chooseImage({
				success(res) {
					let tempFilePaths = res.tempFilePaths;
					that.tmpImageUrl = tempFilePaths[0];
					that.uploadFile();
				}
			});
		},		
		// logo上传图片
		uploadFile() {
			uni.showLoading({title: '图片上传中'});
			uploadImage(0,this.tmpImageUrl, 'job/user/', result => {
				this.company.enterpriseLogo = result;
				console.log(this.company.enterpriseLogo)
				uni.hideLoading();
			});
		},
		
		// 点击保存按钮
		async register(){	
			if(this.company.enterpriseName == ''){
				uni.showToast({
					title: '请输入公司名称',
					icon: "none"
				});
				return false;
			}else if(this.company.startWorkTime == ''){
				uni.showToast({
					title: '请选择工作时间',
					icon: "none"
				});
				return false;
			}else if(this.company.endWorkTime == ''){
				uni.showToast({
					title: '请选择工作时间',
					icon: "none"
				});
				return false;
			}else if(this.company.enterpriseScale == ''){
				uni.showToast({
					title: '请选择公司规模',
					icon: "none"
				});
				return false;
			}else if(this.company.enterpriseFoundTime == ''){
				uni.showToast({
					title: '选择公司成立时间',
					icon: "none"
				});
				return false;
			}else if(this.company.enterpriseNature == ''){
				uni.showToast({
					title: '请选择请选择公司性质',
					icon: "none"
				});
				return false;
			}else{
				this.$page.prePage().company = this.company;
				uni.navigateBack({
					delta: 1
				})		
			}
			
		},
		onInput(e){
			this.infoname = e.detail.value
		},
		onOk() {
			this.company.enterpriseName = this.infoname
			this.$refs.popup.close();
		},
		caLce(){
			this.$refs.popup.close();
			this.infoname = ''
		},		
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
						
			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
			
		},
	}
};
</script>

<style lang="scss" scoped>
input {
	width: 90%;
}
.input-group {
	border-radius: 10upx;
	margin-top: 10upx;
	overflow: hidden;
	margin-bottom: 120upx;
}

.input-row {
	display: flex;
	flex-direction: row;
	position: relative;
	background: #fff;
	justify-content: space-between;
	align-items: center;
	padding: 15upx 10upx;
}

.input-row .title {
	width: 25%;
	padding: 20upx 0;
	padding-left: 20upx;
	line-height: 50upx;
}

.border-bottom-1px {
	position: relative;

	&::after {
		position: absolute;
		z-index: 1;
		right: 0;
		bottom: 0;
		left: 20upx;
		height: 1upx;
		content: '';
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		background-color: #e2e2e2;
	}
}

.header {
	display: flex;
	flex-direction: column;
	.tip {
		font-size:24rpx;
		color:#666;
		margin-left: 20upx;
	}
}

.head-img {
	width: 160rpx;
	height: 160rpx;
	display: block;
	overflow: hidden;
	background: #f5f5f5;
	border-radius: 50%;
	image {
		width: 160upx;
		height: 160upx;
		border-radius: 50%;
	}
}

radio-group {
	margin-right: 10upx;
}

.radio {
	margin-left: 20upx;
}

.input-column {
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 30upx 20upx 10upx 20upx;

	.title {
		margin-left: 10upx;
	}

	.input-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.picker {
		padding: 30upx 0;
		margin-left: 10upx;
		position: relative;
		picker {
			font-size: 28rpx;
			width: 100%;
			position: absolute;
		}
	}
	.yzb-next {
		float: right;
		color: #999;
	}
}

.content {
	background: #fff;
}

.btn-row {
	position: fixed;
	z-index: 999;
	bottom: 0upx;
	padding: 20upx 0;
	background-color: #ffffff;
	width: 100%;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	box-sizing: content-box;	
	.btn-save {
		background-color:#84C0F4;
		height: 90upx;
		line-height: 90upx;
		font-size: 34rpx;
		width: 90%;
		margin: 0 auto;
	}
	
}
.mask-content{
	width: 600rpx;
	position: relative;
	height: 400rpx;
	.uni-popup-dialog {			
			min-height: 300rpx;
			border-radius: 5px;
			background-color: #fff;
			border-radius: 4rpx;
			margin: 0 auto;
		}
		.uni-dialog-title{
			padding: 30rpx 0;
		}
		.uni-dialog-title-text {
			font-size: 16px;
			font-weight: 500;
			padding-left: 30rpx;
		}
	
		.uni-dialog-content {	
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			padding: 0 30rpx 18rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-bottom: 1px solid #eee;
		}
		.pad-20{
			padding:0 20rpx;
		}
		.uni-dialog-content-text {
			font-size: 14px;
			color: #6e6e6e;
		}
	
		.uni-dialog-button-group {		
			display: flex;
			flex-direction: row;
			border-top-color: #f5f5f5;
			border-top-style: solid;
			border-top-width: 1px;
			position: absolute;
			bottom: 0;
			width: 100%;
		}
	
		.uni-dialog-button {	
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 45px;	
			cursor: pointer;
		}
	
		.uni-border-left {
			border-left-color: #f0f0f0;
			border-left-style: solid;
			border-left-width: 1px;
		}
	
		.uni-dialog-input {
			flex: 1;
			font-size: 14px;
		}
}


</style>
